import { DeleteOutlined, SettingOutlined } from "@ant-design/icons";
import { ActionConfig } from "./ActionModal";
import { useComponentsStore } from "@/stores/edit-pages-store";

export type ActionEchoPropsType = ActionConfig & {
  eventName:string;
  echoEditAction:(action:ActionConfig, index: number, eventName: string)=>void
}
export function ActionEcho(props: ActionEchoPropsType, index:number) {
  const { curComponent, curComponentId, updateComponentProps } = useComponentsStore();
  const { type, label,eventName,echoEditAction } = props;
  const handleEdit=()=>{
    const action = curComponent?.props?.[eventName]?.actions[index]
    echoEditAction(action, index, eventName)
  }
  const handleDelete=()=>{
    const arr = curComponent?.props?.[eventName]?.actions
    arr.splice(index, 1)
    updateComponentProps(curComponentId!, {
      [eventName]: { actions: arr },
    });
  }
  return (
    <div className="flex-1 w-10 pl-1">
      <div className="flex justify-between items-center">
        <div>
          <span>{label}</span>
        </div>
        <div className="flex gap-1 text-sm text-gray-400">
          <SettingOutlined onClick={handleEdit}/>
          <DeleteOutlined onClick={handleDelete}/>
        </div>
      </div>
      <div className="mt-1">
        {type === "goToLink" &&
         <div>
          <span>跳转至：</span>
          <span>{props?.config.url}</span>
         </div>
        }
        {type === "showMessage" &&
         <div>
          <span>显示消息：</span>
          <span>{props?.config.text}</span>
         </div>
        }
        {/* {type === "customJS" &&
         <div>
          <span>显示消息：</span>
          <span>{props?.code}</span>
         </div>
        } */}
        {/* {type === "componentMethod" &&
         <div>
          <span>显示消息：</span>
          <span>{props?.config.method}</span>
         </div>
        } */}
      </div>
    </div>
  );
}
